<template>
  <div class="commonHeader">
    <div class="commonHeader">
      <div class="leftBack block" @click="goTo">
        <img src="../../assets/back.png">
      </div>
      <div class="centerTitle block">{{name}}</div>
      <div class="emptyDiv block"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'commonHeader',
  props: {
    title: {
      type: String,
      default: '帮助中心'
    },
    url: {
      type: String,
      default: 'Index'
    }
  },
  data () {
    return {
      name: this.title
    }
  },
  methods: {
    goTo () {
      this.$router.push({
        name: this.url
      })
    }
  },
  created () {
    if (this.$route.query.title) {
      this.name = decodeURIComponent(this.$route.query.title)
    }
  }
}
</script>

<style lang='scss' scoped>
    .commonHeader {
        font-size: 16px;
        height: 44px;
        background: #2fd683;
        line-height: 44px;
        display: flex;
        color: #ffffff;
        width: 100%;
        .leftBack {
            width: 15%
        }
        .centerTitle {
            width: 70%;
        }
        .emptyDiv {
            width: 15%
        }
        .leftBack {
            padding-left: 2.5%; 
            img {
                width: 12px;
                vertical-align: middle;
                display: inline-block;
            }
        }
        .centerTitle {
            text-align: center;
        }
    }
</style>
